<template>
	<view :class="isFiexd?'mask':'maskHide'" @click="closeSheet()">
		<!-- 弹窗 -->
		<!-- <view class="sheet" :class="isFiexd?'sheetShow':'sheeHide'" @touchmove.stop.prevent="moveHandle"> -->
		<view class="sheet" :class="isFiexd?'':'sheeHide'" :style="{top:isFiexd?topLocation:'120%'}" @touchmove.stop.prevent="moveHandle">
			<slot></slot>
		</view>
	</view>
</template>
<script>
	export default {
		name: "my_sheet",
		props: {
			isFiexd:{
				type: Boolean,
				default: false
			},
			topLocation:{
				type: String,
				default: '60%'
			}
		},
		methods: {
			closeSheet(){
				this.$emit('close')
			},
			stopEvent() { //@click.stop防止事件冒泡

			},
			moveHandle() { //不让页面滚动

			}
		}
	}
</script>

<style>
	/* sheet弹窗 */
	.mask {
		background-color: rgba(0, 0, 0, 0.5);
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		transition: all 0.5s;
	}
	
	.sheet {
		width: 100%;
		height: 100%;
		position: fixed;
		bottom: 0;
		background:#FFFFFF;
		z-index: 10000;
		color: #333333;
		transition: all 0.5s;
	}
	
	/* 显示时候的动画默认0.5s */
	.sheetView {
		width: 100%;
		height: 80%;
		background: white;
		z-index: 10001;
		/* transition: all 0.5s; */
	}
	
	.sheetShow {
		top: 60% !important;
	}
	
	/* 关闭时的动画，时间自己可以设置0.5s*/
	.sheeHide {
		top: 120% !important;
		transition: all 0.5s;
	}
	
	.maskHide {
		transition: all 0.5s;
		background-color: rgba(255, 255, 255, 0);
	}
	
	/* 项目需求根据设计稿要展示的高度,超出这个高度就自动滚动*/
	.sheetView_active {
		height: 30%;
	}
	
	/* 隐藏滚动条 */
	/* ::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	} */
	
	.work-type {
		margin: 30upx;
	}
	
	.check {
		width: 30upx;
		height: 30upx;
		border-radius: 50%;
		border: 1px solid #CCCCCC;
		margin-right: 10upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.action-bar {
		padding: 20upx 30upx;
		background: #FFFFFF;
		border-bottom: 1px solid #C8C7CC;
	}

	/* sheet弹窗结束 */
</style>
